<template>
	<view>
		<contont-nav-bar></contont-nav-bar>
		<view class="information-contont">
			<view class="contont">
				<view>
					<view class="pingtai" :class="{'bdr':isShowPush}">
						<platform-push :isShowPush="isShowPush" @onShowPush="onShowPush"></platform-push>
					</view>
					<view class="check" v-if="isShowPush">
						<view class="slider" >
							<swiper style="height: 335px;" :indicator-dots="true" indicator-active-color="#4F9AFF">
								<swiper-item>
									<scroll-view scroll-y="true" class="sv" :refresher-enabled="true" :refresher-triggered="isRefresherShow" @refresherrefresh="onRefresherrefresh">
										<message-list :list="list" @onCliskShow="onCliskShow($event)"></message-list>
									</scroll-view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item"></view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
				<view>
					<view class="shangpin" :class="{'bdr':isShangPinPush}">
						<goods-prompt :isShangPinPush="isShangPinPush" @onShangPinShowPush="onShangPinShowPush"></goods-prompt>
					</view>
					<view class="check" v-if="isShangPinPush">
						<view class="slider" >
							<swiper style="height: 335px;" :indicator-dots="true" indicator-active-color="#4F9AFF">
								<swiper-item>
									<scroll-view scroll-y="true" class="sv">
										<message-list :list="list" @onCliskShow="onCliskShow($event)"></message-list>
									</scroll-view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item"></view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>	
			</view>
			<view class="info-bottom">
				<view class="information-text">消息中心</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<message-contont @onDelete="onDelete" @onClose="onClose"></message-contont>
		</uni-popup>	
	</view>
</template>

<script>
	import MessageContont from '../../components/xiaoxizhongxin/message-contont.vue'
	import GoodsPrompt from '../../components/xiaoxizhongxin/goods-prompt.vue'
	import PlatformPush from '../../components/xiaoxizhongxin/platform-push.vue'
	import MessageList from '../../components/xiaoxizhongxin/message-list.vue'
	import ContontNavBar from '../../components/common/contont-nav-bar.vue'
	export default {
		components: {
			ContontNavBar,
			MessageList,
			PlatformPush,
			GoodsPrompt,
			MessageContont
		},
		data() {
			return {
				isRefresherShow: false,
				isShowPush: false,//控制推送平台展开收起
				isShangPinPush: false,//控制商品提示展开收起
				isShowRead: true, //控制信息已读还是未读状态
				list: [
					{
						name: '使用量警报',
						date: '2020-12-12 15:31:12',
						isNotRead: true, //是否未读消息
						isEmergency: true //是否紧急信息
					},
					{
						name: '使用量警报',
						date: '2020-12-12 15:31:12',
						isNotRead: true, //是否未读消息
						isEmergency: false
					},
					{
						name: '使用量警报',
						date: '2020-12-12 15:31:12',
						isNotRead: false, //是否未读消息
						isEmergency: false
					},
					{
						name: '使用量警报',
						date: '2020-12-12 15:31:12',
						isNotRead: false, //是否未读消息
						isEmergency: false
					},
					{
						name: '使用量警报',
						date: '2020-12-12 15:31:12',
						isNotRead: false, //是否未读消息
						isEmergency: false
					},
					{
						name: '使用量警报',
						date: '2020-12-12 15:31:12',
						isNotRead: false, //是否未读消息
						isEmergency: false
					},
					{
						name: '使用量警报',
						date: '2020-12-12 15:31:12',
						isNotRead: false, //是否未读消息
						isEmergency: false
					},
					{
						name: '使用量警报',
						date: '2020-12-12 15:31:12',
						isNotRead: false, //是否未读消息
						isEmergency: false
					},
					{
						name: '使用量警报',
						date: '2020-12-12 15:31:12',
						isNotRead: true, //是否未读消息
						isEmergency: true
					}
				]
			}
		},
		onLoad() {
			let terminalId = 85
			uni.connectSocket({
				url: "ws://161.189.170.215:8888/ws_sc/"+terminalId,
			    success:(res)=>{
					console.log('成功的')
					console.log(res)
				},
				fail:(err)=>{
					console.log('失败的')
					console.log(err)
				},
			});
		},
		methods: {
			onShowPush() {
				this.isShowPush = !this.isShowPush
			},
			onShangPinShowPush() {
				this.isShangPinPush = !this.isShangPinPush
			},
			onCliskShow(index) {
				//修改阅读状态为已读
				this.list[index].isNotRead = false
				//点击详情，未读紧急信息为false
				this.list[index].isEmergency = false
				//打开弹出层
				this.$refs.popup.open()
			},
			onClose() {
				//关闭弹出层
				this.$refs.popup.close()
			},
			onDelete() {
				console.log('onDelete');
			},
			onRefresherrefresh() { //下拉刷新
				this.isRefresherShow = true
				setTimeout(()=>{
					this.isRefresherShow = false
				},5000)	
			}
		}
	}
</script>

<style scoped lang="less">
/deep/.uni-swiper-dot {
	width: 18rpx;
	height: 18rpx;
	margin-right: 20rpx !important;
}	
/deep/ .uni-swiper-dots-horizontal{
	bottom: 6rpx;
}
/deep/ .uni-scroll-view-refresh-inner{
	width: 70rpx;
	height: 70rpx;
}
.contont{
	// height: 1160rpx;
	height: 75.7vh;
	overflow-y: auto;
}	
.information-contont{
	box-sizing: border-box;
	// width: 2802rpx;
	// height: 1304rpx;
	width: 97.5vw;
	height: 85vh;
	border: 4rpx solid #4F9AFF;
	border-radius: 32rpx;
	// margin: 38rpx 36rpx 32rpx 32rpx;
	margin: 2.4vh 36rpx 3.15vh 32rpx;
	box-shadow: 0rpx 3px 6rpx 0rpx rgba(3, 28, 62, 0.24);
	position: relative;
	.info-bottom{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 138rpx;
		position: absolute;
		right: 0;
		left: 0;
		bottom: 0;
		background: #4F9AFF;
		border-radius: 0 0 32rpx 32rpx;
		.information-text{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 52rpx;
			color: #FFFFFF;
			font-weight: 400;
		}
	}
	.pingtai{
		// width: 2736rpx;
		// height: 148rpx;
		width: 95vw;
		height: 9.7vh;
		background: #E8F2FF;
		border-radius: 20rpx;
		margin: 32rpx 26rpx 26rpx 32rpx;	
	}
	.shangpin{
		// width: 2736rpx;
		// height: 148rpx;
		width: 95vw;
		height: 9.7vh;
		background: #E8F2FF;
		border-radius: 20rpx;
		margin: 0rpx 26rpx 26rpx 32rpx;	
	}
}	
.check{
	box-sizing: border-box;
	// width: 2736rpx;
	width: 95vw;
	// height: 756rpx;
	height: 49.41vh;
	background: #E8F2FF;
	border-radius: 0 0 20rpx 20rpx;
	margin: -26rpx 26rpx 26rpx 32rpx;
}
.slider{
	// height: 720rpx;
	height: 47.06vh;
	background: #FFFFFF;
	margin: 0 36rpx 38rpx 36rpx;
	border-radius: 20rpx;
	overflow-y: auto;
}
.bdr{
	border-radius:20rpx 20rpx 0 0 !important;
}
.sv{
	height: 91%;
}

</style>
